<template>
  <div>
    <div class="home-header">
         <h3>饭了么</h3>
     </div>
     <h2>窗口管理</h2>
     <div class="search">
        <van-icon name="search" />
      <input type="text" placeholder="请输入搜索关键词" v-model="value">
      <button  @click="search">搜索</button>
     </div>

     <div>
      <template v-for="nestedArray in shanglist">
<ShangDateItems v-for="item in nestedArray" :item="item" :key="item.postId"></ShangDateItems>
      </template>
</div>
     <van-tabbar route v-model="active">
  <van-tabbar-item to="/stuguan" icon="list-switching">学生</van-tabbar-item>
  <van-tabbar-item to="/shangguan" icon="list-switching">商家</van-tabbar-item>
  <van-tabbar-item to="/guanli" icon="contact-o">我的</van-tabbar-item>
</van-tabbar>
  </div>
</template>

<script>
import ShangDateItems from '@/components/ShangjiaDate.vue';
import {getShangJia,getShangDate} from '@/api/guanli/stuguan'
export default {

    data() {
        return {
            active:0,
            value:'',
            shanglist:[],
         
        }
    },
    components:{
      ShangDateItems
    },
    created(){
      getShangDate().then((res)=>{
            this.shanglist=[res.data]
            console.log(this.shanglist);
        })
    },
    methods:{
        //根据搜索关键词搜索数据
        search(){
          getShangJia(this.value).then((res)=>{
                this.shanglist=[res.data]
                this.$toast('搜索成功')
                // console.log(this.shanglist);
            })
        },
    }

}
</script>

<style lang="less" scoped>

.home-header{
     width: 100%;
     height: 30px;
     background-color: rgb(10, 135, 245);
     h3{
         text-align: center;
         color: aliceblue;
         padding-top: 5px;
     }
     
  }
  h2{
    margin-top: 10px;
    text-align: center;
  }
  .search{
    input{
        margin-left: 10px;
        width: 250px;
        height: 39px;
        background-color: #f7f8fa;
        border: none;
        border-radius: 20px;
        text-indent: 10px;
    }
    button{
        border: none;
        background-color: #0a87f5;
        color: #f7f8fa;
        height: 35px;
        width: 70px;
        border-radius: 20px;
    }
  }
</style>